<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {orderdetail, shengchanwanbi} from "@/request/api";

const orderId = ref(0);//订单ID
const orderDetail = ref([]);//订单详情
const userinfo = ref(uni.getStorageSync('userinfo'));//用户详情
onLoad((query) => {
  orderId.value = query.id;
  getOrderDetail();
});
onShow(() => {
  if (orderId.value) {
    getOrderDetail();
  }
})

//获取订单详情
const getOrderDetail = () => {
  orderdetail({
    id: orderId.value
  }).then(res => {
    orderDetail.value = res.data.reverse();
  })
}
//页面跳转
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}
//生产完成
const createComplete = () => {
  uni.showModal({
    title: '是否生产完成',
    showCancel: true,
    success({confirm}) {
      if (confirm) {
        shengchanwanbi({
          id: orderId.value
        }).then(() => {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          });
          getOrderDetail();
        })
      }
    }
  })

}
</script>
<template>
  <view class="order-detail-page">
    <u-navbar placeholder title="订单"></u-navbar>
    <scroll-view scroll-y class="scroll-y">
      <view class="content">
        <view class="line-item" v-for="(item,index) of orderDetail" :key="index">
          <view class="title">
            <image src="/static/line-dot.png"></image>
            <text>{{ item.status }}</text>
          </view>
          <view class="item-content">
            <view class="time">
              <text v-if="item.status==='下单'">{{ item.name }}</text>
              <text v-if="item.status==='复核销售单'">指定生产人员</text>
              <text v-if="item.status==='生产中'">指定生产人员</text>
              <text v-if="item.status==='生产完毕'">指定生产人员</text>
              <text v-if="item.status==='发货完毕'">指定生产人员</text>
              <text v-if="item.status==='复核财务核算'">指定财务</text>
              <text v-if="item.status==='结账完毕'">指定财务</text>

              <text>{{ item.time }}</text>
            </view>
            <view class="operate">
              <view class="left">
                操作：
                <text :class="{
                  wait:index===0 && item.status!=='结账完毕',
                  complete:index>0 || item.status==='结账完毕',
                }">{{ item.zc }}
                </text><!--wait complete-->
              </view>
              <view v-if="item.status==='下单'" class="right">
                <text v-if="index===0 && userinfo.type==='复核人员'"
                      @click="navigateTo(`/pages/sales-order/sales-order?id=${orderId}`)" class="wait">复核《销售单》
                </text>
                <text v-if="index>0 && userinfo.type==='复核人员' || userinfo.type==='销售经理'" @click="navigateTo(`/pages/sales-order/sales-order?id=${orderId}&disabled=1`)"
                      class="complete">查看《销售单》
                </text>
              </view>
              <view v-if="item.status==='复核销售单'" class="right">
                <text v-if="index===0 && userinfo.type==='生产人员'"
                      @click="navigateTo(`/pages/dispatch-info/dispatch-info?id=${orderId}`)" class="wait">派单
                </text>
<!--        && userinfo.type==='生产人员'        -->
                <text v-if="index>0  " @click="navigateTo(`/pages/sales-order/sales-order?id=${orderId}&disabled=1`)"
                      class="complete">查看《复核销售单》
                </text>
              </view>
              <view v-if="item.status==='派单'" class="right">
                <text v-if="index===0 && userinfo.type==='生产人员'"
                      @click="navigateTo(`/pages/dispatch-info/dispatch-info?id=${orderId}`)" class="wait">派单
                </text>
<!--        && userinfo.type==='生产人员'        -->
                <text v-if="index>0 " @click="navigateTo(`/pages/sales-order/sales-order?id=${orderId}&disabled=1`)"
                      class="complete">查看《复核销售单》
                </text>
              </view>
              <view v-if="item.status==='生产中'" class="right">
                <!--                <text v-if="index===0 && userinfo.type==='生产人员'" @click="navigateTo(`/pages/document/document?id=${orderId}`)" class="wait">编辑单据</text>-->
<!--   && userinfo.type==='生产人员'              -->
                <text v-if="index===0  && userinfo.type==='生产人员'" @click="createComplete" class="wait">生产完成
                </text>
                <text v-if="index>0 " @click="navigateTo(`/pages/dispatch-info/dispatch-info?id=${orderId}&disabled=1`)"
                      class="complete">查看派单
                </text>
              </view>
              <view v-if="item.status==='生产完毕'" class="right">
<!--               && (userinfo.type==='生产人员' || userinfo.type==='财务人员') -->
                <text v-if="index===0 "
                      @click="navigateTo(`/pages/document/document?id=${orderId}`)" class="wait">编辑单据
                </text>
<!--              && userinfo.type==='生产人员'  -->
                <text style="margin-left: 10rpx;" v-if="index===0 "
                      @click="navigateTo(`/pages/dispatch-info/dispatch-info?id=${orderId}&push=1`)" class="wait">发货
                </text>
                <text v-if="index>0 " @click="navigateTo(`/pages/dispatch-info/dispatch-info?id=${orderId}&disabled=1`)"
                      class="complete">查看派单
                </text>
              </view>
              <view v-if="item.status==='发货完毕'" class="right">
                <text v-if="index===0 && userinfo.type==='财务人员'"
                      @click="navigateTo(`/pages/financial-account/financial-account?id=${orderId}`)" class="wait">填写《财务核算表》
                </text>

<!--              && userinfo.type==='生产人员'  -->
                <text v-if="index>0 " @click="navigateTo(`/pages/document/document?id=${orderId}&disabled=1`)"
                      class="complete">查看单据
                </text>
              </view>
              <view v-if="item.status==='结账完毕'" class="right">
                <text v-if="index===0 && userinfo.type==='财务复核人员'"
                      @click="navigateTo(`/pages/financial-account/financial-account?id=${orderId}&fh=1`)" class="wait">复核《财务》
                </text>
                <text v-if="index>0 && userinfo.type==='财务人员'" @click="navigateTo(`/pages/financial-account/financial-account?id=${orderId}&disabled=1`)"
                      class="complete">查看《财务核算表》
                </text>
              </view>
              <view v-if="item.status==='财务复核完毕'" class="right">
                <text v-if="index===0 && userinfo.type==='财务复核人员'" @click="navigateTo(`/pages/financial-account/financial-account?id=${orderId}&disabled=1`)"
                      class="complete">查看《财务复核表》
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>


<style scoped lang="scss">
.order-detail-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .content {
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;

    .line-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 62rpx;
      position: relative;

      &:last-child {
        &:before {
          width: 0 !important;
        }
      }

      &:before {
        content: "";
        height: calc(100% - 28rpx);
        width: 2rpx;
        position: absolute;
        background-color: #3563FF;
        left: 14rpx;
        top: 28rpx;
      }

      .item-content {
        margin-left: 42rpx;
        height: 184rpx;
        background: #F4F7FF;
        border-radius: 10rpx;
        margin-top: 24rpx;
        padding: 50rpx 30rpx 0 30rpx;
        display: flex;
        flex-direction: column;

        .operate {
          display: flex;
          align-items: center;
          height: 56rpx;
          margin-top: 22rpx;
          justify-content: space-between;

          .right {
            .complete {
              width: 124rpx;
              height: 23rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #3563FF;
            }

            .wait {
              padding: 16rpx 40rpx;
              background: #3563FF;
              border-radius: 28rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }

          .left {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;

            text {
              margin-left: 8rpx;
            }

            text.wait {
              color: rgba(255, 0, 0, 1);
            }

            text.complete {
              color: rgba(0, 176, 80, 1);
            }
          }
        }

        .time {
          display: flex;
          align-items: center;
          justify-content: space-between;

          text:last-child {
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
          }

          text:first-child {
            font-weight: 400;
            font-size: 30rpx;
            color: #333333;
          }
        }
      }

      .title {
        display: flex;
        align-items: center;

        text {
          font-weight: 500;
          font-size: 26rpx;
          margin-left: 16rpx;
          color: #222222;
        }

        image {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }
}
</style>
